<template>
  <div
    id="main32"
    class="main"
  />
</template>

<script>
export default {
  mounted () {
    this.echartsFn()
  },
  methods: {
    echartsFn () {
      var chartDom = document.getElementById('main32')
      var myChart = this.$echarts.init(chartDom)
      var option
      const barWidth = 12
      var data1 = [42]
      var titlename = ['时间']
      option = {
        backgroundColor: 'balck',
        xAxis: {
          show: false,
          inverse: true
        },
        yAxis: [
          {
            show: false,
            data: titlename,
            inverse: true,
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          {
            show: false,
            inverse: true,
            data: titlename,
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: '#fff'
              }
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
        // 内
          {
            type: 'bar',
            barWidth: barWidth,
            legendHoverLink: false,
            symbolRepeat: true,
            silent: true,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: '#74ddff' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#ffc975' // 100% 处的颜色
                  }
                ]
              },
              shadowBlur: 4,
              shadowColor: '#74ddff'
            },
            data: data1,
            z: 1,
            animationEasing: 'elasticOut'
          },
          // 背景
          {
            type: 'pictorialBar',
            animationDuration: 0,
            symbolRepeat: 'fixed',
            symbolMargin: '20%',
            symbol: 'roundRect',
            symbolSize: [6, barWidth],
            itemStyle: {
              normal: {
                color: '#12272A'
              }
            },
            label: {
              show: false
            },
            data: data1,
            z: 0,
            animationEasing: 'elasticOut'
          },
          // 分隔
          {
            type: 'pictorialBar',
            itemStyle: {
              color: '#000'
            },
            symbolRepeat: 'fixed',
            symbolMargin: 4,
            symbol: 'roundRect',
            symbolClip: true,
            symbolSize: [2, barWidth],
            symbolPosition: 'start',
            symbolOffset: [0, 0],
            data: data1,
            z: 2,
            animationEasing: 'elasticOut'
          },
          // 图标
          {
            name: '图标',
            type: 'pictorialBar',
            symbol:
                'image://',
            symbolSize: [50, 50],
            symbolOffset: [-25, 0],
            z: 12,
            itemStyle: {
              normal: {
                color: '#14b1eb'
              }
            },
            symbolPosition: 'end',
            data: data1
          },
          // 外框
          {
            name: '外框',
            type: 'bar',
            barGap: '-100%', // 设置外框粗细
            yAxisIndex: 1,
            data: [100],
            barWidth: 25,
            itemStyle: {
              normal: {
                color: 'none',
                borderColor: '#74ddff'
              }
            }
          }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>

<style>

</style>
